<template>
  <div>
    <el-row align="middle" class="pt-20">
      <el-col :span="16">
        <p class="main_title">{{ $t('menu.PROV') }}</p>
      </el-col>
    </el-row>
    <div style="display: flex; margin: 15px;0;15px;0">
      <div style="flex: 0 0 70%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <el-row class="search_block pt-20">
          <el-col :span="8">
            <el-input placeholder="请输入省份ID\名称" v-model="searchData.term" class="input-with-select" clearable @change="doList">
              <el-button slot="append" icon="el-icon-search" @click="doList">查询</el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div style="flex: 0 0 25%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <div style="float:right">
          <el-button size="medium" type="primary" v-if="userStat === 1" @click="addProv">{{ $t('button.ADDPROV') }} <i class="el-icon-circle-plus-outline"></i>
          </el-button>
        </div>
      </div>
    </div>

    <div class="table_container">
      <el-table :data="provinces" :header-cell-style="boxheader" :row-style="{height:0+'px'}" :cell-style="{padding:0+'px'}" style="width: 100%">
        <el-table-column min-width="50px" align="center" prop="provid" :label="$t('prov.ID')">
          <template slot-scope="scope">
            <span>{{ scope.row.provid}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="80px" align="center" :label="$t('prov.NAME')">
          <template slot-scope="scope">
            <span>{{ scope.row.provname}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="80px" align="center" label="帅鸽云">
          <template slot-scope="scope">
            <span>{{ scope.row.saige}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="80px" align="center" label="是否扫描">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="changeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column min-width="50px" align="center" :label="$t('common.OPER')" v-if="userStat === 1">
          <template slot-scope="scope">
            <!--<el-button type="text" @click="updateProv(scope.$index, scope.row)">{{ $t('common.UPDATE') }}</el-button>-->
            <el-button type="text" @click="deleteProv(scope.row)">{{ $t('common.DELETE') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="col-sm pt-3 text-sm-left" style="text-align:right; display: contents">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.curpage" :page-sizes="[5, 10, 20, 50]"
          :page-size="searchData.pagesize" layout="total, sizes,  pager, jumper" :total="searchData.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="$t('button.ADDPROV')" :visible.sync="addVisible" :width="width" :close-on-click-modal="false" class="addQuestion">
      <!-- :show-close="false" -->
      <img :src="iconImg" class="enlarge" @click="enlarge" width="12px" height="12px" />
      <el-form :model="addform" :rules="rules" ref="addform" label-width="120px">
        <el-form-item :label="$t('prov.ID')" prop="provid" style="padding-bottom:15px">
          <el-input v-model="addform.provid" :placeholder="$t('tips.ENTER.PROVID')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('prov.NAME')" prop="provname">
          <el-input v-model="addform.provname" :placeholder="$t('tips.ENTER.PROVNAME')"></el-input>
        </el-form-item>
        <el-form-item label="帅鸽云" prop="saige">
          <el-input v-model="addform.saige" placeholder="帅鸽云的省份编号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align:center!important;">
        <el-button class="cancel_button" @click="addCancel('addform')">{{ $t('common.CANCEL') }}</el-button>
        <el-button class="confirm_button" @click="addSubmit('addform')">{{ $t('common.CONFIRM2') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import provinceService from "@/service/provinceService";
import enlargeImg from "@/assets/images/icon_2.png";
import narrowImg from "@/assets/images/icon_3.png";
import i18n from "@/lang";
import { mapGetters } from "vuex";

export default {
  name: "ProvinceList",
  data() {
    return {
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5",
      },
      searchData: {
        term: "",
        curpage: 1,
        pagesize: 10,
        total: 0,
      },
      provinces: [],
      iconImg: enlargeImg,
      width: "600px",
      addVisible: false,
      updateVisible: false,
      addform: {
        provid: "",
        provname: "",
      },
      rules: {
        provid: [
          {
            required: true,
            message: i18n.t("valid.PROVID.NOTNULL"),
            trigger: "blur",
          },
        ],
        provname: [
          {
            required: true,
            message: i18n.t("valid.PROVNAME.NOTNULL"),
            trigger: "blur",
          },
          {
            max: 40,
            message: i18n.t("valid.PROVNAME.SIZELIMIT"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  mounted: function () {
    this.$store.dispatch("setActive", "2").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
    // localStorage.setItem('active', 2)
  },
  created() {
    provinceService.listProvinces({ curpage: 1, pagesize: 10 }).then((res) => {
      if (res && res.data.result === 0) {
        this.provinces = res.data.data;
        this.searchData.total = res.data.total;
      }
    });
  },
  destroyed() {},
  computed: {
    ...mapGetters(["userid", "userStat"]),
  },
  methods: {
    doList() {
      this.searchData.curpage = 1;
      this.listProv();
    },
    listProv() {
      provinceService.listProvinces(this.searchData).then((res) => {
        if (res && res.data.result === 0) {
          this.provinces = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
    changeStatus(row) {
      let params = { provid: row.provid, status: row.status }
      provinceService.updateStatus(params).then(res => {
        if (res && res.data.result === 0) {
          this.$message.success('操作成功!');
        } else {
          this.$message.error('操作失败！')
        }
        this.listProv()
      })
    },
    clearAddProvForm() {
      this.addform = {
        provid: "",
        provname: "",
      };
    },
    addProv() {
      this.addVisible = true;
      this.clearAddProvForm();
    },
    /**
     * 取消新增
     **/
    addCancel(addform) {
      this.addVisible = false;
      this.$refs[addform].resetFields();
    },
    /**
     * 提交新增
     **/
    addSubmit(addform) {
      this.$refs[addform].validate((valid) => {
        let dataInfo = {
          provid: this.addform.provid,
          provname: this.addform.provname,
        };
        if (valid) {
          provinceService.addProvince(dataInfo).then((res) => {
            if (res && res.data.result === 0) {
              this.$message({
                message: i18n.t("tips.PROV.ADDSUCCESS"),
                type: "success",
              });
              this.addVisible = false;
              this.listProv();
            }
          });
        } else {
          return false;
        }
      });
    },
    deleteProv(row) {
      this.$confirm("是否删除省份 " + row.provname + " ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let dataInfo = {
            provid: row.provid,
          };
          provinceService.deleteProvince(dataInfo).then((res) => {
            if (res && res.data.result === 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.listProv();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    ifnull(data) {
      if (data == null || data === undefined || data === "") {
        return true;
      } else {
        return false;
      }
    },

    /**
     * 弹窗放大缩小
     */
    enlarge() {
      if (this.width === "600px") {
        this.width = "1000px";
        this.iconImg = narrowImg;
      } else {
        this.width = "600px";
        this.iconImg = enlargeImg;
      }
    },
    handleSizeChange(val) {
      this.searchData.pagesize = val;
      this.listProv();
    },
    handleCurrentChange(val) {
      this.searchData.curpage = val;
      this.listProv();
    },
  },
};
</script>

  <style>
.main_title {
  color: #343434;
  font-size: 18px;
  margin: 7px 0 0 0;
}
</style>
